<template>
	<div class="home">
		<!-- charts -->
		<el-row :gutter="15" class="mt15">
			<el-col :md="24" :lg="24" :xl="24" class="home-lg">
				<el-card shadow="hover">
					<div slot="header">
						<span>每月营业额</span>
						<!-- <span>{{ $t('message.card.title8') }}</span> -->
					</div>
					<div class="charts">
						<div class="charts-left mr7">
							<div ref="homeOvertimeRef" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>

		</el-row>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
import axios  from 'axios';
export default {
	name: 'home',
	components: { Scroll },
	data() {
		return {

			chartsRightList,
			newsInfoList,
			userInfo: {},
			dailyMessage: {},

			requesturl:"http://162.14.107.118:8086/",//axios请求地址
	
		};
	},
	created() {
		this.initUserInfo();
	},
	computed: {
		currentTime() {
			return formatAxis(new Date());
		},
		optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
		getUserInfos() {
			return this.$store.state.userInfos.userInfos;
		},
	},
	mounted() {
		//获得每个月的订单和营业额
		this.getMonthMoney()
	
	},
	methods: {
		
	
		//获得每个月的订单和营业额
		getMonthMoney(){
			axios.get(this.requesturl+"PC/getMonthMoney").then(res=>{
				let mo=res.data.data 
				let monthMoney=[]
				let monthOrder=[]
				for (let index = 0; index < mo.length; index++) {
					monthMoney[index] = mo[index].monthMoney
					monthOrder[index] = mo[index].monthOrder
				}
				const myChart = echarts.init(this.$refs.homeOvertimeRef);
			const option = {
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					// data: ['订单数量', '销售额'],
					data: ['销售额'],
					right: 13,
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				},
				yAxis: [
					{
						type: 'value',
						name: '销售额',
						// interval:2000
					},
				],
				series: [
					// {
					// 	name: '订单数量',
					// 	type: 'line',
					// 	data: monthOrder,
					// },
					{
						name: '销售额',
						type: 'line',
						data: monthMoney,
					},
					
					
				],
			};
				myChart.setOption(option);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			})
		},

	
		// 初始化登录信息
		initUserInfo() {
			if (!Session.get('userInfo')) return false;
			this.userInfo = Session.get('userInfo');
			this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
		},
		// 消息通知当前项点击
		onNewsInfoListClick(v) {
			window.open(v.link);
		},
	
		
	},
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
